<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    
    {{#noop}}
    {{ false | assignTo: debug }}
    {{/noop}}
    
    {{ (debug ? '' : '[hash].min') | assignTo: min }}

    {{ ['!/assets/css/default.css','/assets/css/','/css/buttons.css','/css/svg-auth.css','/css/svg-icons.css']
       | bundleCss({ disk:!debug, out:`/css/lib.bundle${min}.css` }) }}

    {{ ['/assets/css/default.css']
       | bundleCss({ minify:!debug, cache:!debug, disk:!debug, out:`/css/bundle${min}.css` }) }}

</head>
<body>
    <i hidden>{{ '/js/hot-fileloader.js' | ifDebugIncludeScript }}</i>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a title="ServiceStack WebApp Starter" class="navbar-brand" href="/" style="width:220px;">
                <img src="{{PathBase}}/assets/img/logo.png" width="42" height="32" class="d-inline-block align-top" alt="" style="float:left;margin:0 10px 0 0">
                <h3>MyApp</h3>
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          {{* 'menu' | partial *}}
          {{ navbar }}
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container" style="padding: 1em 0">
      <div class="row">
        <div class="col-lg-12">
          {{#if title}}<h1 class="mt-5">{{ title }}</h1>{{/if}}
          {{ page }}
        </div>
      </div>
    </div>

    <script>
        var exports = window;
        var IMPORT = {
            jquery: '$',
            vue: function(){
                var e = require('Vue');
                e.Vue = e; // workaround TypeScript not allowing default imports  
                return e;
            }
        };
        window.require = function(name) {
            var w = IMPORT[name];
            if (w) return typeof w == "function" ? w() : typeof w == 'string' ? exports[w] : w;
            return exports[name] || exports;
        };
    </script>

    {{ [
        '!/assets/js/dtos.js',
        '!/assets/js/default.js',
        'content:/src/source.js',
        'content:/src/components/',
        '/assets/js/jquery.min.js',
        '/assets/js/popper.min.js',
        '/assets/js/',
        '/lib/@servicestack/client/index.js',
    ] | bundleJs({ minify:!debug, cache:!debug, disk:!debug, out:`/js/lib.bundle${min}.js` }) }}


    {{ [
        '/assets/js/dtos.js',
        '/assets/js/default.js',
    ] | bundleJs({ minify:!debug, cache:!debug, disk:!debug, out:`/js/bundle${min}.js` }) }}

    <script src="/js/ss-utils.js"></script>

    {{ scripts | raw }}

    <div>Copyright &copy; {{ now | dateFormat('yyyy') }}</div>

</body>
</html>
